<template>
  <div class="detail_table">
    <div class="table_nav">
      <div 
        v-for="item in table_nav" 
        :key="item.name" 
        @click="changeTable(item)"
        class="table_nav_item"
        :class="activeName == item.name? 'active' :'' "
      >{{ item.name }}</div>
    </div>
    <div class="table_components" >  
      <component :is="activeComponent" v-loading="loading" :startAndEndStation="props.startAndEndStation"/>
    </div>
  </div>
</template>

<script setup>
import TripsNumber from './TripsNumber.vue'
import OperatingSchedule from './OperatingSchedule.vue'
import NoOperationalDetails from './NoOperationalDetails'
import DriverAttendanceDetails from './DriverAttendanceDetails.vue'
import SchedulingRequest from './SchedulingRequest.vue'
// import SchedulingEventDetail from './SchedulingEventDetail.vue'
const props = defineProps({
  routeId:Number,
  startAndEndStation:Object
})
const loading = ref(true)
const table_nav = [
  {
    name:'趟次流水',
    component:TripsNumber
  },
  {
    name:'运营时刻表',
    component:OperatingSchedule
  },
  {
    name:'非运营调度明细',
    component:NoOperationalDetails
  },
  {
    name:'司机考勤明细',
    component:DriverAttendanceDetails
  },
  {
    name:'调度申请',
    component:SchedulingRequest
  },
  // {
  //   name:'调度事件明细',
  //   component:SchedulingEventDetail
  // }
]

const activeName = ref('趟次流水')
const activeComponent = ref(TripsNumber)

const changeTable = (data)=>{
  loading.value = true
  activeName.value = data.name
  activeComponent.value = data.component
  setTimeout(() => {
    loading.value = false
  }, 1000);
}
setTimeout(() => {
    loading.value = false
  }, 500)
</script>

<style lang="scss" scoped>
.detail_table{
  width: 100%;
  height: 100%;
  .table_nav{
    display: flex;
    .table_nav_item{
      margin-right: 5px;
      font-size: 16px;
      color: #9BAFD6;
      background-color: #091940;
      border-radius: 10px 10px 0px 0px;
      padding: 8px 20px;
      cursor: pointer;
      &:hover{
        background-color: #11224b;
      }
    }
    .active{
      color: #FEFEFE;
      background-color: #668FF5;
      &:hover{
        background-color: #668FF5;
      }
    }
  }
  .table_components{
    width: 100%;
    height: 100%;
    margin: 1px 0px;
    background-color: #091940;
  }
}

</style>